<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ include file="/commons/jsp/taglibs.jsp"%>
<html>
  <head>
	<title>公共平台 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!-- 样式文件的引入 -->
	<link href="${ctx}/commons/css/style.css" rel="stylesheet" type="text/css"/>
	<link rel="stylesheet" type="text/css" href="${ctx}/commons/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${ctx}/commons/themes/icon.css">
	<!-- jqueryUI JS文件的引入 -->
	<script type="text/javascript" src="${ctx}/commons/js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="${ctx}/commons/js/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="${ctx}/commons/js/easyui-extends-validate.js"></script>
	<!-- jqueryUI国际化 -->
	<script type="text/javascript" src="${ctx}/commons/js/easyui-lang-zh_CN.js"></script>
	<!-- 开发使用的公用js方法 -->
	<script type="text/javascript" src="${ctx}/commons/js/common.js"></script>
	<!-- 开发国际化的引用，主要完成后台信息在前台提示的国际化，一定要放在最后 -->
	<script type="text/javascript">var ctx = '${ctx}';var actionExt = "action";var i18n = new Object();</script>
	<script src="${ctx}/commons/js/i18n/message_zh_CN.js" type="text/javascript"></script>
  </head>
  
  <body>
    <div class="easyui-layout" data-options="fit:true,border:false" >
		<div data-options="region:'west',border:true" style="width:260px;">
		<div style="padding:0;border-bottom:1px solid #ddd;width: 242px;height: 14px;background-color: #f5f5f5;text-align: center;font-size: 12px;padding: 8px;">
			菜 单 树
		</div>
			<ul id="modelTree"></ul>
		</div>
		<div data-options="region:'center',border:true">
			<div class="easyui-layout" data-options="fit:true,border:false" >
			<div data-options="region:'north',border:false" style="padding: 4px;height: 50px;overflow: hidden;">
			<div class="easyui-panel" data-options="fit:true,border:true" >
			<div  class="queryContent">
				<form name="searchForm" id="searchMenuForm" method="post" action="" style="display: none; ">
				<table class="queryTable" >
					<tbody>
						<tr>
							<th>菜单名称</th>
							<td width="10%">
							<input class="easyui-validatebox" type="text" name="name" maxlength="20" style="width:120px"></input></td>
							<td align="right" width="10%"><a href="javascript:void(0);" class="easyui-linkbutton" id="searchMenu"  plain="true">查询</a>
							<a href="javascript:void(0);" class="easyui-linkbutton" id="resetSearchMenu" plain="true">清空</a></td>
						</tr>
					</tbody>
				</table>
				</form>
			</div>
			</div>
			</div>
			<div data-options="region:'center',border:false" style="padding: 4px;">
		    <table id="listMenuTable" class="easyui-datagrid" 
				data-options="singleSelect:false,toolbar:'#menutb',method:'post',rownumbers:true,fit:true,fitColumns:true,border:true,
					pagination:true,remoteSort:true,multiSort:true,striped:true,onLoadSuccess:function(data){$('#'+menuParamObj.searchID).attr('disabled',false);},
					url:'${ctx}/framework/menu/list'"}>
				<thead>
					<tr>
						<th data-options="field:'id',checkbox:true"></th>
						<th data-options="field:'name',width:50,formatter: function(value,row,index){
								return '<a href=javascript:void(0);  onclick=openDataDialog(menuParamObj,\''+row.id+'\',freshMenuTree) >'+value+'</a>';
							},title:'菜单名称'"></th>
							<th data-options="field:'pName',width:50,title:'上级菜单'"></th>
						<th data-options="field:'hrefUrl',width:100,title:'连接路径'"></th>
						<th data-options="field:'remark',width:50,title:'菜单说明'"></th>
						<th data-options="field:'disSort',width:50,title:'排序值'"></th>
						<th data-options="field:'createTime',sortable:true,width:50,title:'添加时间'" align="center"></th>
						<th data-options="field:'updateTime',sortable:true,width:50,title:'更新时间'" align="center"></th>
					</tr>
				</thead>
			</table>
			<div id="menutb" style="display: none;">
				<div>
					<a href="javascript:void(0);" onclick="openDataDialog(menuParamObj,undefined,freshMenuTree);" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
					<a href="javascript:void(0);" onclick="updateData(menuParamObj,freshMenuTree);" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
					<a href="javascript:void(0);" onclick="deleteData(menuParamObj,freshMenuTree);" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
				</div>
			</div>
		</div>
		</div>
		</div>
	</div>
</body>
	<script type="text/javascript">
		//初始化表格对应的js对象
		var menuParamObj;
		$(function() {
			//初始化表格对象数据
			menuParamObj = new initParams(
					{
						paramObjName : 'menuParamObj',//表格对应的实体对象名称，好区分多个表格情况下的对象
						tableId:'listMenuTable',
						addDataFormId:'addMenuDataForm',
						showDialogId:'firstLevelDialog',
						searchID:'searchMenu',
						resetSearchID:'resetSearchMenu',
						searchFormID:'searchMenuForm',
						updateUrl:"${ctx}/framework/menu/input?id=",
						deleteUrl:'${ctx}/framework/menu/remove',
						addDialogWidth:700,
						addDialogHeight:310,
						ctx:'${ctx}',
						addDialogTitle:'菜单信息'
					});
			//初始化查询
			init(menuParamObj);
			$('#modelTree').tree({
				onClick: function(node){
					 var queryParams = {"pid":node.id}; 
					$('#'+menuParamObj.tableId).datagrid('options').queryParams=queryParams;
					$('#'+menuParamObj.tableId).datagrid('reload');
				},
				url:'${ctx}/framework/menu/getModelTree?r='+new Date().getTime(),method:'get',animate:true,lines:true
			});
		});
		function freshMenuTree(){
			$('#modelTree').tree('reload');
		}
	</script>
  </body>
</html>
